Event.observe ( window, 'load', bootstrap );

function bootstrap () {
  TableKit.options.editAjaxURI = '/rest/user';
  
  table_kit_select_input_as_boolean ( $w( 'authorization_owner authorization_writer authorization_follower' ) );
  
  $( 'product'      ).on ( 'change', product_changed );
  $( 'refresh_page' ).on ( 'click',  refresh_page    );
  
  var parameter = window.location.search.toQueryParams ();
  
  if ( parameter['id'] ) {
    $( 'product' ).value = parameter['id'];
    
    refresh_page ();
  }
}

function product_changed () {
  display_users ();
}

function refresh_page () {
  display_users ();
}

function display_users () {
  var product = $( 'product' ).value;
  
  var button_ids = $w( 'refresh_page' );
  
  if ( product != '' ) {
    new Ajax.Request ( '/rest/product/' + product + '/users', {
      method         : 'get',
      requestHeaders : { Accept : 'application/json' },
      onCreate       : function () {
      },
      onSuccess      : function ( response ) {
        var users = response.responseJSON;
        
        var html =
          "<div id=\"user_table_wrapper\">\n"
        + "  <table id=\"user_table\" class=\"users sortable editable\">\n"
        + "    <caption>Users</caption>\n"
        + "    <thead>\n"
        + "      <tr>\n"
        + "        <th id=\"id\"                     class=\"noedit\">Name</th>\n"
        + "        <th id=\"authorization_owner\"    class=\"\"      >Owner</th>\n"
        + "        <th id=\"authorization_writer\"   class=\"\"      >Writer</th>\n"
        + "        <th id=\"authorization_follower\" class=\"\"      >Follower</th>\n"
        + "      </tr>\n"
        + "    </thead>\n"
        + "    <tfoot>\n"
        + "      <tr>\n"
        + "        <th                                               >Name</th>\n"
        + "        <th                                               >Owner</th>\n"
        + "        <th                                               >Writer</th>\n"
        + "        <th                                               >Follower</th>\n"
        + "      </tr>\n"
        + "    </tfoot>\n"
        + "    <tbody>\n"
        ;

        var i = 1;

        users.each ( function ( h ) {
          html = html
          + "      <tr class=\"" + ( i % 2 ? "odd" : "even" ) + "\" id=\"user_id_" + h.id + "__product_id_" + product +"\">\n"
          + "        <td title=\"" + h.id + "\">" +   h.name                      + "</td>\n"
          + "        <td>"                        + ( h.owner    ? 'yes' : 'no' ) + "</td>\n"
          + "        <td>"                        + ( h.writer   ? 'yes' : 'no' ) + "</td>\n"
          + "        <td>"                        + ( h.follower ? 'yes' : 'no' ) + "</td>\n"
          + "      </tr>\n"
          ;
          
          i = i + 1;
        } );

        html = html
        + "    </tbody>\n"
        + "  </table>\n"
        + "</div>\n"
        ;

        if ( users.length > 0 ) {
          $( 'user_table_wrapper' ).replace ( html );
          
          TableKit.Sortable.init ( 'user_table' );
          TableKit.reload ();
          
          button_ids.each ( function ( id ) { enable ( id ) } );
        }
        else {
          $( 'user_table_wrapper' ).replace ( '<div id="user_table_wrapper"><p class="error">No users!</p></div>' );
          
          button_ids.each ( function ( id ) { disable ( id ) } );
        }
      },
      onFailure      : function ( response ) {
      },
      onComplete     : function () {
      }
    } );
  }
}
